<template>
  <NewCard>
      <div class="detail_main">
          <h2><b>案例</b><p>{{currentDetail.title}}</p></h2>
          <div class="detail_content" ref="detailContent">
            <div class="detail_source">
                <ul>
                    <li>案由：{{currentDetail.from}}</li>
                    <li>案号：{{currentDetail.caseType}}</li>
                    <li>发布日期：{{currentDetail.time}}</li>
                </ul>
            </div>

            <div class="detail_txt">
            <p v-for="cd in currentDetail.info" :key="cd.id">
                {{cd}}
            </p>
            </div>
              
            <SubBtn>
                <template slot="btn">
                    <el-button round>上一个案例</el-button>
                    <el-button round>下一个案例</el-button>
                    <el-button round class="addBtn">适用</el-button>
                </template>
            </SubBtn>
          </div>
      </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue"
export default {
    name:'detailPage',
    components:{NewCard,SubBtn},
    props:['currentDetail'],
    data(){
        return{
            typeTxt:'',
            labelList:[],//文章标签的列表
            labelListNum:8,//文章默认一次添加的数量

            moreState:true,//标签更多按钮的显示状态(更多还是收起)
            morehypo:true,//当标签数量少于8个的时候隐藏
        }
    },
    mounted(){

    },
    methods:{

    },
    watch:{

    },
    computed:{

    },
}
</script>

<style scoped>
::v-deep .top{
    display: none;
}
::v-deep .el-card__body>div{
    height: 100%!important;
    overflow-y: inherit!important;
    position: relative;
}


/* 标题 */
.detail_main{
    height: 100%;
}
.detail_main h2{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.detail_main h2>b{
    display: block;
    width: 8%;
    height: 24px;
    background-color: #747474;
    color: #fff;
    font-size: 14px;
    text-align: center;
    font-weight: 400;
    line-height: 24px;
    border-radius: 15px;
    margin-right: 2%;
}
.detail_main h2>p{
    width: 90%;
    margin: 0;
}

/* 内容区 */
.detail_content{
    height: 86%;
    overflow-y: auto;
}
.detail_content::-webkit-scrollbar{
  width: 0;
}
/* 来源 */
.detail_source>p{
    font-size: 12px;
    color: #999;
}
.detail_source ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 10px 20px;
    margin: 0;
    background: #F4F5F8;
    border-radius: 8px;
    color: #656669;
    font-size: 12px;
}
.detail_source ul>li{
    width: 30%;
    line-height: 24px;
}
.detail_source ul>li:nth-child(1){
    width: 35%;
}
.detail_source ul>li:nth-child(4){
    width: 35%;
}

.detail_txt{
    font-size: 14px;
    line-height: 26px;
    color: #333;
}
.detail_txt p>b{
    display: block;
    font-weight: 400;
    /* text-indent: 2em; */
    line-height: 28px;
}
.detail_txt p>b img{
    width: 100%;
}
.detail_txt p>b:first-child{
    display: inline-block;
    margin-right: 10px;
}
.detail_txt p>b:nth-child(2){
    display: inline;
    text-indent:0;
}

.detail_reply{
    background-color: #F6F7FA;
    border-radius: 8px;
    padding: 10px 16px;
    color: #768097;
}
.detail_reply p{
    margin: 0;
}

/* 附件 */
.accessory{
    margin-top: 40px;
}
.accessory ul{
    padding: 0;
}
.accessory ul>li{
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
    border: 1px solid #EFEFEF;
    border-radius: 8px;
}
.accessory ul>li>a{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.accessory ul>li svg{
    cursor: pointer;
    font-size: 16px;
}


/* 标签 */
.detail_label{
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-bottom: 50px;
}
.detail_label .el-tag{
    width: 11%;
    color: #999;
    padding: 0;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 15px;
    line-height: 26px;
    background-color: #fff;
    margin-right: 1.71%;
    margin-bottom: 10px;
    cursor: pointer;
    overflow:hidden; 
    text-overflow:ellipsis;
    white-space:nowrap; 
}
.detail_label .el-tag:nth-child(8n){
    margin-right: 0;
}
.label_more{
    display: block;
    background-color: transparent;
    border: 0;
    margin: 0 auto;
    color: #b9b9b9;
    flex-basis: 100%;
  }

/* 功能区 */
.ribbon_content{
    position: absolute;
    left: -30px;
    bottom: -30px;
    width: calc(100% + 60px);
    background-color: #fff;
    border-top: 1px solid #ECEDF0;
    padding: 0 30px;
}

/* 按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button.el-button--default{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #F87A23;
  border-color: #F87A23;
}
::v-deep .subBtn>.el-button.addBtn{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>